﻿<!DOCTYPE html>
<html>
<head>
    <title>节假日管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet" type="text/css" />


    <style type="text/css">
        .l-table-edit {}
        .l-table-edit-td{ padding:4px;}
        .l-button-submit,.l-button-reset{width:80px; float:left; margin-left:10px; padding-bottom:2px;}
    </style>
</head>
<body>


<div style="padding: 10px;">
    <div>
        <a class="button button-primary" onclick="addGroup()">新建组</a>
        <a class="button button-primary" onclick="copyGroup()">复制组</a>
        <a class="button button-primary" onclick="removeGroup()">删除组</a>
    </div>

    <div class="row">
        <div class="span4" style="padding-top: 6px;">
            <div id="holiday_list">
            </div>
        </div>
        <div class="span16">
            <div id="grid">
            </div>
        </div>
    </div>
</div>


    <script src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>
    <script src="../../resources/lib/bui/js/bui-min.js"></script>
    <script src="../../resources/js/jsdate.js"></script>
    <!-- script start-->
    <script type="text/javascript">
        BUI.use(['bui/grid','bui/data'],function(Grid,Data){
            var Store = Data.Store;
            var rowValidator = function(value,obj){
                if (!obj.start || obj.start=='') {
                    return '起始时间不能为空！'
                }
                if (!obj.end || obj.end=='') {
                    return '结束时间不能为空！'
                }

                if(obj.start > obj.end){
                    return '起始日期不能晚于结束日期！'
                }
            };
            var dateRender = function(d) {
                if (d) {
                    return new Date(d).pattern("MM-dd HH:mm");
                } else {
                    return '';
                }
            };

            var columns = [
                {title : '节假日名称', dataIndex :'name', width:80,editor : {xtype : 'text'}},
                {title : '开始时间', dataIndex : 'start', width:60, editor : {xtype : 'date', datePicker: {showTime:true}, validator : rowValidator},
                    renderer : dateRender},
                {title : '结束时间',dataIndex :'end',editor : {xtype : 'date', datePicker: {showTime:true}, validator : rowValidator},
                    renderer : dateRender},
                {title : '备注',dataIndex : 'remark', editor : {xtype : 'text'}},
                {title : '操作',dataIndex:'e',renderer : function(){
                    return '<span class="grid-command btn-edit">编辑</span>'
                }}
            ];

            var data = [
                {name:'劳动节',start:1363924044176, end:1363924044178, remark:''},
                {name:'国庆节',start:1363924044176, end:1363924044176, remark:''},
                {name:'元旦节',start:1363924044176, end:1363924044176, remark:''}
            ];

            var editing = new Grid.Plugins.RowEditing({
                        triggerCls : 'btn-edit',
                        triggerSelected : false
                    });
            var store = new Store({
                data : data,
                autoLoad:true
            });
            var grid = new Grid.Grid({
                render:'#grid',
                columns : columns,
                width : 800,
                forceFit : true,
                tbar:{ //添加、删除
                    items : [{
                        btnCls : 'button button-small',
                        text : '<i class="icon-plus" ></i>添加',
                        listeners : {
                            'click' : addFunction
                        }
                    },
                        {
                            btnCls : 'button button-small',
                            text : '<i class="icon-remove"></i>删除',
                            listeners : {
                                'click' : delFunction
                            }
                        }]
                },
                plugins : [editing,Grid.Plugins.CheckSelection],
                store : store
            });

            grid.render();

//添加记录
            function addFunction(){
                var newData = {name : '新建'};
                store.addAt(newData,0);
                editing.edit(newData,'name'); //添加记录后，直接编辑
            }
//删除选中的记录
            function delFunction(){
                var selections = grid.getSelection();
                store.remove(selections);
            }
        });

        var List = BUI.List;
        var items = [
                    {text:'节假日组1',value:'1'},
                    {text:'节假日组2',value:'2'},
                    {text:'节假日组3',value:'3'},
                    {text:"节假日组4",value:4}
                ],
                list = new List.SimpleList({
                    elCls:'bui-select-list',//默认是'bui-simple-list'
                    width:'100%',
                    render : '#holiday_list',
                    items : items
                });
        list.render();
        list.on('selectedchange', function(){
            alert(list.getSelectedText() + '：' + list.getSelectedValue());
        });

    </script>
    <!-- script end -->
</body>
</html>